<template>
  <div id="header">
    <el-row>
      <el-col :span="8" :offset="8">
        <div>
          <img
            :src="imgUrl1"
            width="100"
            height="100"
            style="border-radius: 50%;"
            plain
            @click="open"
          />
        </div>
      </el-col>
      <el-col :span="4" :offset="4">
        <iframe
          scrolling="no"
          src="https://tianqiapi.com/api.php?style=yd&skin=pitaya"
          frameborder="0"
          width="100%"
          height="30"
          allowtransparency="true"
        ></iframe>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <h1>我与春风皆过客</h1>
        <h3 class="signature">天下那么大，还没一个喜乐有意思</h3>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="10">
        <ul class="navigation">
          <router-link to="/" class="home-link">
            <li>Home</li>
          </router-link>
          <router-link to="/about" class="About-link">
            <li>About</li>
          </router-link>
          <router-link to="/timeline" class="TimeLine-link">
            <li>TimeLine</li>
          </router-link>
          <!--<router-link to="/photo" class="Photo-link">
            <li>Photo</li>
          </router-link>-->
          <router-link to="/topic" class="Share-link">
            <li>Topic</li>
          </router-link>
        </ul>
      </el-col>
      <el-col :span="6">
        <!--<SearchButton/>-->
      </el-col>
      <el-col :span="6">
        <ul class="icon">
          <div class="mask" v-if="showModal" @click="showModal = false"></div>
          <transition name="fade">
            <div class="pop" v-if="showModal">
              <img :src="imgUrl2" class="img-pop" alt="QQ" />
              <img :src="imgUrl3" class="img-pop" alt="WeChat" />
              <div>
                <span class="pop-label">QQ</span>
                <span class="pop-label">公众号</span>
              </div>
            </div>
          </transition>
          <li class="iconfont" @click="showModal = true">&#xe60d;</li>
          <li class="iconfont" @click="showModal = true">&#xe632;</li>
          <li
            @click="toUrl('https://www.zhihu.com/people/chao-ku-de-er-ha')"
            class="iconfont"
          >
            &#xe87c;
          </li>
          <li @click="toUrl('https://gitee.com/zhiqi-wang')" class="iconfont">
            &#xe686;
          </li>
          <li
            @click="toUrl('https://weibo.com/p/1005056379403920?is_all=1')"
            class="iconfont"
          >
            &#xe67a;
          </li>
        </ul>
      </el-col>
      <!--登录模块
      <el-col :span="4">
        <ul class="login">
          <div v-if="hasLogin">
            <ul class="dropdown">
              <button class="dropbtn">{{ username }}</button>
              <div class="dropdown-content">
                <router-link
                  :to="{ name: 'UserCenter', params: { username: username } }"
                  >用户中心</router-link
                >
                <router-link :to="{ name: 'ArticleCreate' }" v-if="isSuperuser"
                  >发表文章</router-link
                >
                <router-link to="/" v-on:click.prevent="logout()"
                  >退出登录</router-link
                >
              </div>
            </ul>
          </div>

          <div v-else>
            <router-link to="/login" class="login-link">登录</router-link>
          </div>
        </ul>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
//import SearchButton from '@/components/SearchButton.vue';
import authorization from "@/utils/authorization";
import axios from "axios";

export default {
  name: "BlogHeader",
  // 定义组件
  //components: {SearchButton},
  data: function() {
    return {
      //searchText: "",
      username: "",
      hasLogin: false,
      isSuperuser: JSON.parse(localStorage.getItem("isSuperuser.myblog")),
      showModal: false,
      show: true,
      info: null,
    };
  },

  mounted() {
    authorization().then((data) => ([this.hasLogin, this.username] = data));
    axios
      .get("http://api.btstu.cn/yan/api.php?charset=utf-8&encode=json")
      .then((response) => (this.info = response.data.text));
  },

  methods: {
    refresh() {
      this.username = localStorage.getItem("username.myblog");
    },
    logout() {
      localStorage.clear();
      window.location.reload(false);
    },
    toUrl(url) {
      //window.location.href=url;
      window.open(url, "_blank");
    },
    open() {
      this.$notify({
        title: "毒鸡汤",
        message: this.info,
        position: "top-left",
        offset: 100,
      });
    },
  },
  created() {
    let urlTemp1 = "static/touxiang.jpg";
    this.imgUrl1 = require("@/" + urlTemp1);
    let urlTemp2 = "static/qq.jpg";
    this.imgUrl2 = require("@/" + urlTemp2);
    let urlTemp3 = "static/gongzhonghao.jpg";
    this.imgUrl3 = require("@/" + urlTemp3);
    let urlTemp4 = "static/1.gif";
    this.imgUrl4 = require("@/" + urlTemp4);
  },
};
</script>

<style scoped>
/* 下拉按钮样式 */
.dropbtn {
  background-color: white;
  color: black;
  padding: 8px 8px 30px 8px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  height: 16px;
  border-radius: 5px;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}
/* 下拉菜单的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: LightSkyBlue;
}
</style>

<style scoped>
#header {
  text-align: center;
  margin-top: 20px;
}
.signature {
  color: gray;
}

.login-link {
  color: black;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 20px;
}
.login-link:hover {
  color: LightSkyBlue;
}
.login {
  text-align: right;
  padding-right: 100px;
}

.navigation {
  font-family: "Verdana";
  font-weight: 500;
  font-style: normal;
  color: black;
  display: block;
}
.home-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.home-link:hover {
  color: LightSkyBlue;
}
.About-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.About-link:hover {
  color: LightSkyBlue;
}
.TimeLine-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.TimeLine-link:hover {
  color: LightSkyBlue;
}
.Photo-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.Photo-link:hover {
  color: LightSkyBlue;
}
.Share-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.Share-link:hover {
  color: LightSkyBlue;
}
.iconfont {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  padding: 10px;
  font-size: 20px;
}
.iconfont:hover {
  color: LightSkyBlue;
  cursor: pointer;
}
li {
  display: inline;
}

.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pop {
  background-color: #fff;
  position: fixed;
  top: 250px;
  left: 450px;
  width: 600px;
  height: 300px;
  z-index: 2;
}
.img-pop {
  width: 35%;
  margin: 30px;
  margin-bottom: 15px;
}
.pop-label {
  margin: 120px;
  font-family: "Verdana";
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.7s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.el-row {
  font-family: STKaiti;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
